<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./lib/vue.js"></script>
    <style>
        *{
            padding:0;
            margin:0;
        }
        #root button{
            margin:5px;
            padding:5px;
        }
        #root button.active{
            background:red;
        }
        #root div{
            width:600px;
            height:100px;
            border:1px solid green;
        }
    </style>
</head>
<body>
<div id="root">
    <button @click="activeIndex=index" :class="{active:activeIndex===index}" v-for="(item,index) in info" :key="index">{{item.type}}</button>
    <div v-show="activeIndex===index" v-for="(item,index) in info" :key="'news'+index">
        <p v-for="news in item.newsList" :key="news.id">{{news.title}}</p>
    </div>
</div>
</body>
<script>
	new Vue({
		el:"#root",
		data:{
			activeIndex:0,
            info:[
				{
					type:"体育新闻",
                    newsList:[
						{
							id:"1847545392091103394",
                            title:"开拓者主帅确认罗威今日复出！赛季首秀将有时间限制 穆雷也将回归",
                            href:"https://fans.sports.qq.com/post.htm?id=1847545392091103394#1_allWithElite"
                        },{
						    id:"1847540613218566316",
                            title:"独行侠官方：安东尼-戴维斯因左小腿轻度拉伤 将至少缺阵两场比赛",
                            href:"https://fans.sports.qq.com/post.htm?id=1847540613218566316&mid=255#1_allWithElite"
                        }
                    ]
                },{
                    type:"娱乐新闻",
                    newsList:[
						{
							id:"20251101V0142Y00",
                            title:"著名演员冯淬帆去世，一生未婚独自对抗病痛，5天前悼念许绍雄一语成谶",
                            href:"https://news.qq.com/rain/a/20251101V0142Y00"
                        },{
						    id:"20251031V01T5100",
                            title:"众人被绑在诡异的流水线上",
                            href:"https://news.qq.com/rain/a/20251031V01T5100"
                        }
                    ]
                }
            ]
		}

	})
</script>
</html>